<template>
  <div class="main">
    <el-container>
      <el-header>
        <!--  logo和项目名称-->
        <div class="left_box">
          <span></span>
        </div>
        <!--用户登录展示的头像-->
        <div class="right_box">
          <el-dropdown @command="handleCommand">
            <img src="../assets/img/2.jpg" alt="">
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-house">系统首页</el-dropdown-item>
              <el-dropdown-item icon="el-icon-ship">交流讨论</el-dropdown-item>
              <el-dropdown-item icon="el-icon-switch-button" command="/logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse?'60px':'200px'">
          <el-menu :router="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                   :collapse="isCollapse" text-color="#fff" background-color="#303133" default-active="1-2">
            <!--打开或折叠侧边栏-->
            <el-menu-item @click="toggle">
              <i v-if="isCollapse===false" class="el-icon-s-fold"></i>
              <i v-else class="el-icon-s-unfold"></i>
            </el-menu-item>
            <MenuContent :menuList="menuList"></MenuContent>
          </el-menu>
        </el-aside>
        <el-main :style="defaultHeight">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="less">


.main {
  height: 100%;


  .el-container {

    height: 100%;


    > .el-header {
      background-color: #373d41;
      color: #333;
      text-align: center;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;


      .right_box {
        height: 100%;
        display: flex;
        align-items: center;

        .el-dropdown {
          height: 80%;

          img {
            height: 100%;
            border-radius: 50%;
            margin: auto;
          }
        }
      }
    }

    > .el-aside {
      background-color: #E9EEF3;
      color: #333333;
      text-align: center;
      line-height: 200px;
      overflow: hidden;

      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
      }

      .el-menu {
        height: 100%;
        padding-right: 10px;
      }

    }

    > .el-main {
      background-color: #E9EEF3;
      color: #333;
      //text-align: center;
      height: 100%;
    }


  }
}


</style>


<script>
import MenuContent from "@/components/MenuContent";


export default {
  name: 'Main',
  components: {MenuContent},
  data() {
    return {
      isCollapse: false,//是否折叠侧边栏
      menuList: [
        {
          "id": 1,
          "parentId": 0,
          "menuName": "博客管理",
          "url": "",
          "icon": "el-icon-setting",
          "orderNum": 1,
          "open": 1,
          "disabled": false,
          "perms": null,
          "type": 0,
          "children": [
            {
              "id": 1-1,
              "parentId": 1,
              "menuName": "写博客",
              "url": "/write_blog",
              "icon": "el-icon-star-off",
              "orderNum": 1,
              "open": 0,
              "disabled": false,
              "perms": "welcome:view",
              "type": 0,
              "children": []
            },
            {
              "id": 1-2,
              "parentId": 1,
              "menuName": "写动态",
              "url": "/write_moment",
              "icon": "el-icon-star-off",
              "orderNum": 2,
              "open": 0,
              "disabled": false,
              "perms": "welcome:view",
              "type": 0,
              "children": []
            },
            {
              "id": 1-3,
              "parentId": 1,
              "menuName": "文章管理",
              "url": "/blog_list",
              "icon": "el-icon-picture-outline",
              "orderNum": 3,
              "open": 1,
              "disabled": false,
              "perms": "",
              "type": 0,
              "children": []
            },
            {
              "id": 1-4,
              "parentId": 1,
              "menuName": "动态管理",
              "url": "/moment_list",
              "icon": "el-icon-picture-outline",
              "orderNum": 4,
              "open": 1,
              "disabled": false,
              "perms": "",
              "type": 0,
              "children": []
            },
            {
              "id": 1-5,
              "parentId": 1,
              "menuName": "友链管理",
              "url": "/friend_list",
              "icon": "el-icon-picture-outline",
              "orderNum": 4,
              "open": 1,
              "disabled": false,
              "perms": "",
              "type": 0,
              "children": []
            },
            {
              "id": 1-6,
              "parentId": 1,
              "menuName": "分类管理",
              "url": "/category",
              "icon": "el-icon-postcard",
              "orderNum": 5,
              "open": 0,
              "disabled": false,
              "perms": "",
              "type": 0,
              "children": []
            },
            {
              "id": 1-7,
              "parentId": 1,
              "menuName": "标签管理",
              "url": "/tag",
              "icon": "el-icon-s-home",
              "orderNum": 6,
              "open": 0,
              "disabled": false,
              "perms": "",
              "type": 0,
              "children": []
            },
            {
              "id": 1-8,
              "parentId": 1,
              "menuName": "评论管理",
              "url": "/comment",
              "icon": "el-icon-s-flag",
              "orderNum": 7,
              "open": 0,
              "disabled": false,
              "perms": "",
              "type": 0,
              "children": []
            }
          ]
        },


      ],
      defaultHeight: { //el-main的高度
        height: ""
      }

    }
  },
  methods: {
    /**
     * 侧边栏收缩
     */
    toggle() {
      this.isCollapse = !this.isCollapse;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleCommand(commend) {
      this.$http({
        url: `${commend}`,
        method: 'post',
      }).then(({data}) => {
        if (data.code === 0) {
          this.$router.push("/logout");
          this.$notify({
            title: '成功',
            message: '退出成功',
            type: 'success',
            offset: 75
          });
        }
      }).catch(()=>{
        alert("退出失败")
      })


    },
    //定义方法，获取高度减去头尾
    getHeight() {
      this.defaultHeight.height = window.innerHeight-60+ "px";
    }

  },
  created() {
    //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  }

}
</script>
